<template>
    <h3>选项式API(配置):props</h3>
    <div>
        <h3 @click="editTitle">{{ tle }}</h3>
        <p>props.title:{{ title }}</p>
        <p>props.des:{{ des }}</p>
        <p>props.dao:{{ dao.name }}</p>
        <p>props.user:{{ user.sex }}</p>
        <p>props.des2:{{ des2 }}</p>
    </div>
    <div v-show="isShow" class="isShowHide">显示或隐藏</div>
</template>

<script lang="ts">
export default {
    props:{
        title:{
            type:String,
            required:true
        },
        des:{
            type:[Number,String],
            default:'des的默认值'
        },
        dao:{
            type:Object,
            default(){
                return {
                    name:'青龙偃月刀',
                }
            }
        },
        user:{
            type:Object,
            default(rawProps:any){
                console.log(rawProps);
                return {
                    name:'小度小度' + rawProps.title,
                    sex:1,
                }
            }
        },
        des2:{
            type:[String,Number],
            default:'des2的默认值'
        },
        propH:{
            type:Function,
            default(){
                console.log('子组件props函数被调用');
                return 'Default function'
            }
        }
    },
    data(){
        return {
            tle:this.title,
            sonTitle:'我是子组件定义的标题 sonTitle',
            isShow:false
        }
    },
    methods:{
        editTitle(){
            this.tle='可以修改被props的值初始化后的状态变量'
            this.propH(this.sonTitle,this.showHander)
        },
        showHander(){
            this.isShow=!this.isShow
        }
    },
    computed:{},
    monted(){},
    wathc:()=>{}
}
</script>
<style>
.isShowHide{
    height: 100%;
    width: 100%;
    background-color: cyan;
}
</style>